﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <link href="css/reset.source.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.4.min.js"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            console.log(jQuery.easing.def);

            jQuery.easing.def = 'easeOutBounce';

            $(".tp-bannertimer").css({ width: '0%' });
            $(".tp-bannertimer").animate({ width: '100%' }, 6000, "easeOutQuad");

            $("p.slide", "#menuside").mouseover(function () {
                $(this).prev(".panel").show("slow"); //slideToggle
                //$(this).toggleClass("active");
                return false;
            });

            $("div.panel", "#menuside").mouseleave(function () {
                $(this).hide("slow");
                //$(this).next(".slide").toggleClass("active");
                return false;
            });

        });
    </script>
    <style type="text/css">

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body { background-color:#504D4F; margin: 0 auto; padding: 0; font: 75%/120% Arial, Helvetica, sans-serif;  color:White;}

body{ background-position:center; background-repeat:no-repeat; background-attachment:fixed; }

A { COLOR: #fff; }
A:focus { outline: none; }
A:hover { COLOR: #36c; TEXT-DECORATION: underline }
        
.active {  }
        
#menuside { position:fixed; z-index:1; right:10px;  }        
#menuside ul { list-style:none; }
#menuside ul li { width:40px; float:left; margin-right:2px;  }
#menuside div.panel { 
    width:40px; display: none; text-align:right; padding-top:20px;
    background-image:url(imgs/quickmenu.png); background-repeat:no-repeat; 
}
#menuside p.slide {  
    margin: 0; padding: 0; width: 40px; height: 41px; display:block;
    background: url(imgs/quickmenu.png) no-repeat; background-position: 0 -160px;  
}
#menuside div.panel a { 
    width:20px; display:block; overflow:hidden; margin-left:20px; 
    background-image:url(imgs/bgmenu.png); background-repeat:no-repeat; 
}
#menuside div.panel a.uk { height:60px; background-position: 0 0px; }
#menuside div.panel a.de { height:60px; background-position: 0 -60px; }
#menuside div.panel a.cn { height:30px; background-position: 0 -120px; }
#menuside div.panel a img { width:20px; height:1px; overflow:hidden; }


.tp-bannertimer {
    width: 100%;
    height: 10px;
    background: url(imgs/timer.png);
    position: absolute;
    z-index: 200;
}

    </style>
</head>
<body>

    <div id="menuside">
        <ul>
            <li>
                <div class="panel">
                    <a class="uk" href="#a"><img src="imgs/bgmenu.png" alt="English" /></a>
                    <a class="de" href="#b"><img src="imgs/bgmenu.png" alt="German" /></a>
                    <a class="cn" href="#c"><img src="imgs/bgmenu.png" alt="中文" /></a>             
                </div>
                <p class="slide"><img alt="" src="imgs/null.gif" /></p>
            </li>
            <li>
                <div class="panel">
                    <a class="uk" href="#a"><img src="imgs/bgmenu.png" alt="English" /></a>
                    <a class="de" href="#b"><img src="imgs/bgmenu.png" alt="German" /></a>
                    <a class="cn" href="#c"><img src="imgs/bgmenu.png" alt="中文" /></a>             
                </div>
                <p class="slide"><img alt="" src="imgs/null.gif" /></p>
            </li>
            <li>
                <div class="panel">
                    <a class="uk" href="#a"><img src="imgs/bgmenu.png" alt="English" /></a>
                    <a class="de" href="#b"><img src="imgs/bgmenu.png" alt="German" /></a>
                    <a class="cn" href="#c"><img src="imgs/bgmenu.png" alt="中文" /></a>             
                </div>
                <p class="slide"><img alt="" src="imgs/null.gif" /></p>
            </li>
        </ul>

    </div>

    <div class="tp-bannertimer" style="overflow-x: hidden; overflow-y: hidden; "></div>

    <nav>
    </nav>

    

    <header>
    </header>

    <section>
        <article></article>
    </section>

    <footer>
    </footer>

    <aside></aside>

    <div style="width: 800px; height: 1600px; background-color: Gray; margin: 0px auto;">
        <p>&nbsp;</p>
        <img src="imgs/glare2.png" />

    </div>

    
   
</body>
</html>
